<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 4.2.1"><link rel="apple-touch-icon" sizes="180x180" href="/uploads/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/uploads/images/icons/icon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/uploads/images/icons/icon-72x72.png"><link rel="mask-icon" href="/uploads/images/icons/icon-128x128.png" color="#222"><link rel="manifest" href="/uploads/manifest.json"><meta name="google-site-verification" content="Xk9YWz2-rBE9P5__qdWz3nUr4zb9bIDSdANHpezjB04"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js/themes/blue/pace-theme-minimal.css"><script src="https://cdn.jsdelivr.net/npm/pace-js/pace.min.js"></script><script id="hexo-configurations">var NexT=window.NexT||{},CONFIG={hostname:"csjiabin.github.io",root:"/",scheme:"Pisces",version:"7.8.0",exturl:!1,sidebar:{position:"left",display:"post",padding:18,offset:12,onmobile:!1},copycode:{enable:!0,show_result:!0,style:null},back2top:{enable:!0,sidebar:!1,scrollpercent:!0},bookmark:{enable:!1,color:"#222",save:"auto"},fancybox:!0,mediumzoom:!1,lazyload:!0,pangu:!0,comments:{style:"tabs",active:null,storage:!0,lazyload:!0,nav:null},algolia:{appID:"247B2CASJT",apiKey:"35251fd833510bf375580b718064be3a",indexName:"csjiabin.github.io",hits:{per_page:10},labels:{input_placeholder:"搜索",hits_empty:"未发现与 「${query}」相关的内容",hits_stats:"${hits} 条相关条目, 使用了 ${time} 毫秒"}},localsearch:{enable:!1,trigger:"auto",top_n_per_article:1,unescape:!1,preload:!1},motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},path:"search.xml"}</script><meta name="description" content="创建一个数组12345678&#x2F;&#x2F; 字面量方式:&#x2F;&#x2F; 这个方法也是我们最常用的，在初始化数组的时候 相当方便let a &#x3D; [3, 11, 8]; &#x2F;&#x2F; [3,11,8];&#x2F;&#x2F; 构造器:&#x2F;&#x2F; 实际上 new Array &#x3D;&#x3D;&#x3D; Array,加不加new 一点影响都没有。let a &#x3D; Array(); &#x2F;&#x2F; []let a &#x3D; Array(3); &#x2F;&#x2F; [undefined,undefined,un"><meta property="og:type" content="article"><meta property="og:title" content="js数组详细操作方法及解析合集"><meta property="og:url" content="https://csjiabin.github.io/2019/01/15/js%E6%95%B0%E7%BB%84%E8%AF%A6%E7%BB%86%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%8F%8A%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86/index.html"><meta property="og:site_name" content="CSjiabin&#39;s Blog"><meta property="og:description" content="创建一个数组12345678&#x2F;&#x2F; 字面量方式:&#x2F;&#x2F; 这个方法也是我们最常用的，在初始化数组的时候 相当方便let a &#x3D; [3, 11, 8]; &#x2F;&#x2F; [3,11,8];&#x2F;&#x2F; 构造器:&#x2F;&#x2F; 实际上 new Array &#x3D;&#x3D;&#x3D; Array,加不加new 一点影响都没有。let a &#x3D; Array(); &#x2F;&#x2F; []let a &#x3D; Array(3); &#x2F;&#x2F; [undefined,undefined,un"><meta property="og:locale" content="zh_CN"><meta property="article:published_time" content="2019-01-15T08:43:09.000Z"><meta property="article:modified_time" content="2020-11-02T09:26:56.676Z"><meta property="article:author" content="csjiabin"><meta property="article:tag" content="js"><meta property="article:tag" content="学习笔记"><meta name="twitter:card" content="summary"><link rel="canonical" href="https://csjiabin.github.io/2019/01/15/js%E6%95%B0%E7%BB%84%E8%AF%A6%E7%BB%86%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%8F%8A%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86/"><script id="page-configurations">CONFIG.page={sidebar:"",isHome:!1,isPost:!0,lang:"zh-CN"}</script><title>js数组详细操作方法及解析合集 | CSjiabin's Blog</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-124238838-1"></script><script>if(CONFIG.hostname===location.hostname){function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-124238838-1")}</script><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?2620e69674d25088f870bef114e8ff89";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><noscript><style>.sidebar-inner,.use-motion .brand,.use-motion .collection-header,.use-motion .comments,.use-motion .menu-item,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.use-motion .logo-line-before i{left:initial}.use-motion .logo-line-after i{right:initial}</style></noscript><link rel="alternate" href="/atom.xml" title="CSjiabin's Blog" type="application/atom+xml"></head><body itemscope itemtype="http://schema.org/WebPage"> <img class="bg-image" src="/uploads/bg.jpg"><div class="container use-motion"><div class="headband"></div><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏"><span class="toggle-line toggle-line-first"></span><span class="toggle-line toggle-line-middle"></span><span class="toggle-line toggle-line-last"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span><h1 class="site-title">CSjiabin's Blog</h1><span class="logo-line-after"><i></i></span></a><p class="site-subtitle" itemprop="description">Goals determine what you going to be!!</p></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul id="menu" class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i> 首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i> 关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i> 标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i> 分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i> 归档</a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i> 搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"></div><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span></div><div class="algolia-results"><div id="algolia-stats"></div><div id="algolia-hits"></div><div id="algolia-pagination" class="algolia-pagination"></div></div></div></div></div></header><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span>0%</span></div> <a href="https://github.com/csjiabin" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><main class="main"><div class="main-inner"><div class="content-wrap"><div class="content post posts-expand"><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://csjiabin.github.io/2019/01/15/js%E6%95%B0%E7%BB%84%E8%AF%A6%E7%BB%86%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%8F%8A%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars0.githubusercontent.com/u/20592953"><meta itemprop="name" content="csjiabin"><meta itemprop="description" content="I never consider ease and joyfulness as the purpose of life itself."></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="CSjiabin's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> js数组详细操作方法及解析合集</h1><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建时间：2019-01-15 16:43:09" itemprop="dateCreated datePublished" datetime="2019-01-15T16:43:09+08:00">2019-01-15</time></span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a></span></span><span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">阅读次数：</span><span id="busuanzi_value_page_pv"></span></span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i></span> <span class="post-meta-item-text">Disqus：</span><a title="disqus" href="/2019/01/15/js%E6%95%B0%E7%BB%84%E8%AF%A6%E7%BB%86%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%8F%8A%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/01/15/js数组详细操作方法及解析合集/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2 id="创建一个数组"><a href="#创建一个数组" class="headerlink" title="创建一个数组"></a>创建一个数组</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字面量方式:</span></span><br><span class="line"><span class="comment">// 这个方法也是我们最常用的，在初始化数组的时候 相当方便</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">3</span>, <span class="number">11</span>, <span class="number">8</span>]; <span class="comment">// [3,11,8];</span></span><br><span class="line"><span class="comment">// 构造器:</span></span><br><span class="line"><span class="comment">// 实际上 new Array === Array,加不加new 一点影响都没有。</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Array</span>(); <span class="comment">// []</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Array</span>(<span class="number">3</span>); <span class="comment">// [undefined,undefined,undefined]</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Array</span>(<span class="number">3</span>, <span class="number">11</span>, <span class="number">8</span>); <span class="comment">// [ 3,11,8 ]</span></span><br></pre></td></tr></table></figure><h3 id="ES6-Array-of-返回由所有参数值组成的数组"><a href="#ES6-Array-of-返回由所有参数值组成的数组" class="headerlink" title="ES6 Array.of() 返回由所有参数值组成的数组"></a>ES6 Array.of() 返回由所有参数值组成的数组</h3><p>定义: 返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。<br>目的: Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="built_in">Array</span>.of(<span class="number">3</span>, <span class="number">11</span>, <span class="number">8</span>); <span class="comment">// [3,11,8]</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Array</span>.of(<span class="number">3</span>); <span class="comment">// [3]</span></span><br></pre></td></tr></table></figure><h3 id="ES6-Arrar-from-将两类对象转为真正的数组"><a href="#ES6-Arrar-from-将两类对象转为真正的数组" class="headerlink" title="ES6 Arrar.from() 将两类对象转为真正的数组"></a>ES6 Arrar.from() 将两类对象转为真正的数组</h3><p>定义: 用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。<br>参数:</p><ul><li>第一个参数(必需): 要转化为真正数组的对象。</li><li>第二个参数(可选): 类似数组的 map 方法，对每个元素进行处理，将处理后的值放入返回的数组。</li><li>第三个参数(可选): 用来绑定 this。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 对象拥有length属性</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="number">0</span>: <span class="string">"a"</span>, <span class="number">1</span>: <span class="string">"b"</span>, <span class="number">2</span>: <span class="string">"c"</span>, <span class="attr">length</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.from(obj); <span class="comment">// ['a','b','c'];</span></span><br><span class="line"><span class="comment">// 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象</span></span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.from(<span class="string">"hello"</span>); <span class="comment">// ['h','e','l','l']</span></span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.from(<span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">"a"</span>, <span class="string">"b"</span>])); <span class="comment">// ['a','b']</span></span><br></pre></td></tr></table></figure><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><p>数组原型提供了非常多的方法，这里分为三类来讲，一类会改变原数组的值，一类是不会改变原数组，以及数组的遍历方法。</p><h3 id="改变原数组的方法-9-个"><a href="#改变原数组的方法-9-个" class="headerlink" title="改变原数组的方法(9 个)"></a>改变原数组的方法(9 个)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES5:</span></span><br><span class="line"><span class="comment">// a.pop() / a.shift()/ a.push() / a.unshift() / a.reverse() / a.splice() / a.sort()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//   ES6:</span></span><br><span class="line"><span class="comment">//  a.copyWithin() / a.fill()</span></span><br></pre></td></tr></table></figure><blockquote><p>对于这些能够改变原数组的方法，要注意避免在循环遍历中改变原数组的选项，比如: 改变数组的长度，导致遍历的长度出现问题。</p></blockquote><h4 id="pop-删除一个数组中的最后的一个元素"><a href="#pop-删除一个数组中的最后的一个元素" class="headerlink" title="pop() 删除一个数组中的最后的一个元素"></a>pop() 删除一个数组中的最后的一个元素</h4><p>定义: pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。<br>参数: 无。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.pop(); <span class="comment">// 3</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// [1,2]</span></span><br></pre></td></tr></table></figure><h4 id="shift-删除数组的第一个元素"><a href="#shift-删除数组的第一个元素" class="headerlink" title="shift() 删除数组的第一个元素"></a>shift() 删除数组的第一个元素</h4><p>定义: shift()方法删除数组的第一个元素，并返回这个元素。<br>参数: 无。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.shift(); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// [2,3]</span></span><br></pre></td></tr></table></figure><h4 id="push-向数组的末尾添加元素"><a href="#push-向数组的末尾添加元素" class="headerlink" title="push() 向数组的末尾添加元素"></a>push() 向数组的末尾添加元素</h4><p>定义: push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。<br>参数: item1, item2, …, itemX ,要添加到数组末尾的元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.push(<span class="string">"末尾"</span>); <span class="comment">// 4</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// [1,2,3,'末尾']</span></span><br></pre></td></tr></table></figure><h4 id="unshift-向数组的开头添加元素"><a href="#unshift-向数组的开头添加元素" class="headerlink" title="unshift() 向数组的开头添加元素"></a>unshift() 向数组的开头添加元素</h4><p>定义: unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。<br>参数: item1, item2, …, itemX ,要添加到数组开头的元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.unshift(<span class="string">"开头"</span>); <span class="comment">// 4</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// ['开头',1,2,3]</span></span><br></pre></td></tr></table></figure><h4 id="reverse-颠倒数组中元素的顺序"><a href="#reverse-颠倒数组中元素的顺序" class="headerlink" title="reverse() 颠倒数组中元素的顺序"></a>reverse() 颠倒数组中元素的顺序</h4><p>定义: reverse() 方法用于颠倒数组中元素的顺序。</p><p>参数: 无</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">a.reverse();</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// [3,2,1]</span></span><br></pre></td></tr></table></figure><h4 id="splice-添加-删除数组元素"><a href="#splice-添加-删除数组元素" class="headerlink" title="splice() 添加/删除数组元素"></a>splice() 添加/删除数组元素</h4><p>定义: splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目<br>语法: <code>array.splice(index,howmany,item1,.....,itemX)</code><br>参数:</p><ul><li>index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。</li><li>howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。</li><li>item1, …, itemX: 可选。向数组添加的新项目。</li></ul><p>返回值: 如果有元素被删除,返回包含被删除项目的新数组。</p><p><strong>例 1:</strong> 删除元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.splice(<span class="number">0</span>, <span class="number">3</span>); <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// [4,5,6,7]</span></span><br><span class="line"><span class="comment">// 从数组下标0开始，删除3个元素</span></span><br><span class="line"><span class="keyword">let</span> item = a.splice(<span class="number">-1</span>, <span class="number">3</span>); <span class="comment">// [7]</span></span><br><span class="line"><span class="comment">// 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7</span></span><br></pre></td></tr></table></figure><p><strong>例 2:</strong> 删除并添加</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.splice(<span class="number">0</span>, <span class="number">3</span>, <span class="string">"添加"</span>); <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// ['添加',4,5,6,7]</span></span><br><span class="line"><span class="comment">// 从数组下标0开始，删除3个元素，并添加元素'添加'</span></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> item = b.splice(<span class="number">-2</span>, <span class="number">3</span>, <span class="string">"添加1"</span>, <span class="string">"添加2"</span>); <span class="comment">// [6,7]</span></span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// [1,2,3,4,5,'添加1','添加2']</span></span><br><span class="line"><span class="comment">// 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'</span></span><br></pre></td></tr></table></figure><p><strong>例 3:</strong> 不删除只添加</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> item = a.splice(<span class="number">0</span>, <span class="number">0</span>, <span class="string">"添加1"</span>, <span class="string">"添加2"</span>); <span class="comment">// [] 没有删除元素，返回空数组</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// ['添加1','添加2',1,2,3,4,5,6,7]</span></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> item = b.splice(<span class="number">-1</span>, <span class="number">0</span>, <span class="string">"添加1"</span>, <span class="string">"添加2"</span>); <span class="comment">// [] 没有删除元素，返回空数组</span></span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素</span></span><br></pre></td></tr></table></figure><p>从上述三个例子可以得出:</p><ol><li>数组如果元素不够，会删除到最后一个元素为止</li><li>操作的元素，包括开始的那个元素</li><li>可以添加很多个元素</li><li>添加是在开始的元素前面添加的</li></ol><h4 id="sort-数组排序"><a href="#sort-数组排序" class="headerlink" title="sort() 数组排序"></a>sort() 数组排序</h4><p>定义: sort()方法对数组元素进行排序，并返回这个数组。<br>参数（可选）: 规定排序顺序的比较函数。<br>默认情况下 sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用<code>toString()</code>方法将元素转化为字符串的 Unicode(万国码)位点，然后再比较字符。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串排列 看起来很正常</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="string">"Banana"</span>, <span class="string">"Orange"</span>, <span class="string">"Apple"</span>, <span class="string">"Mango"</span>];</span><br><span class="line">a.sort(); <span class="comment">// ["Apple","Banana","Mango","Orange"]</span></span><br><span class="line"><span class="comment">// 数字排序的时候 因为转换成Unicode字符串之后，有些数字会比较大会排在后面 这显然不是我们想要的</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">10</span>, <span class="number">1</span>, <span class="number">3</span>, <span class="number">20</span>, <span class="number">25</span>, <span class="number">8</span>];</span><br><span class="line"><span class="built_in">console</span>.log(a.sort()); <span class="comment">// [1,10,20,25,3,8];</span></span><br></pre></td></tr></table></figure><h5 id="比较函数的两个参数"><a href="#比较函数的两个参数" class="headerlink" title="比较函数的两个参数"></a>比较函数的两个参数</h5><p>sort 的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素:</p><ul><li>若比较函数返回值&lt;0，那么 a 将排到 b 的前面;</li><li>若比较函数返回值=0，那么 a 和 b 相对位置不变；</li><li>若比较函数返回值&gt;0，那么 b 排在 a 将的前面；</li></ul><h5 id="sort-排序常见用法"><a href="#sort-排序常见用法" class="headerlink" title="sort 排序常见用法"></a>sort 排序常见用法</h5><ol><li>数组元素为数字的升序、降序:</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array = [<span class="number">10</span>, <span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">20</span>, <span class="number">4</span>, <span class="number">25</span>, <span class="number">8</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 升序 a-b &lt; 0   a将排到b的前面，按照a的大小来排序的</span></span><br><span class="line"><span class="comment">// 比如被减数a是10，减数是20  10-20 &lt; 0   被减数a(10)在减数b(20)前面</span></span><br><span class="line">array.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [1,3,4,4,8,10,20,25];</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 降序 被减数和减数调换了  20-10&gt;0 被减数b(20)在减数a(10)的前面</span></span><br><span class="line">array.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> b - a;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [25,20,10,8,4,4,3,1];</span></span><br></pre></td></tr></table></figure><ol start="2"><li>数组多条件排序</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">10</span>, <span class="attr">age</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">5</span>, <span class="attr">age</span>: <span class="number">4</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">6</span>, <span class="attr">age</span>: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">9</span>, <span class="attr">age</span>: <span class="number">6</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">age</span>: <span class="number">8</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">10</span>, <span class="attr">age</span>: <span class="number">9</span> &#125;</span><br><span class="line">];</span><br><span class="line">array.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (a.id === b.id) &#123;</span><br><span class="line">    <span class="comment">// 如果id的值相等，按照age的值降序</span></span><br><span class="line">    <span class="keyword">return</span> b.age - a.age;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 如果id的值不相等，按照id的值升序</span></span><br><span class="line">    <span class="keyword">return</span> a.id - b.id;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [&#123;"id":2,"age":8&#125;,&#123;"id":5,"age":4&#125;,&#123;"id":6,"age":10&#125;,&#123;"id":9,"age":6&#125;,&#123;"id":10,"age":9&#125;,&#123;"id":10,"age":2&#125;]</span></span><br></pre></td></tr></table></figure><ol start="3"><li>自定义比较函数，天空才是你的极限<br>类似的: 运用好返回值，我们可以写出任意符合自己需求的比较函数</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"Koro1"</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"Koro1"</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"OB"</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"Koro1"</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"OB"</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">"OB"</span> &#125;</span><br><span class="line">];</span><br><span class="line">array.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (a.name === <span class="string">"Koro1"</span>) &#123;</span><br><span class="line">    <span class="comment">// 如果name是'Koro1' 返回-1 ，-1&lt;0 a排在b的前面</span></span><br><span class="line">    <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 如果不是的话，a排在b的后面</span></span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [&#123;"name":"Koro1"&#125;,&#123;"name":"Koro1"&#125;,&#123;"name":"Koro1"&#125;,&#123;"name":"OB"&#125;,&#123;"name":"OB"&#125;,&#123;"name":"OB"&#125;]</span></span><br></pre></td></tr></table></figure><h4 id="ES6-copyWithin-指定位置的成员复制到其他位置"><a href="#ES6-copyWithin-指定位置的成员复制到其他位置" class="headerlink" title="ES6: copyWithin() 指定位置的成员复制到其他位置"></a>ES6: copyWithin() 指定位置的成员复制到其他位置</h4><p>定义: 在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。<br>语法: <code>array.copyWithin(target, start = 0, end = this.length)</code></p><p>参数: 三个参数都是数值，如果不是，会自动转为数值。</p><ul><li>target（必需）: 从该位置开始替换数据。如果为负值，表示倒数。</li><li>start（可选）: 从该位置开始读取数据，默认为 0。如果为负值，表示倒数。</li><li>end（可选）: 到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。</li></ul><p>浏览器兼容(MDN): <code>chrome 45</code>,<code>Edge 12</code>,<code>Firefox32</code>,<code>Opera 32</code>,<code>Safari 9</code>, <code>IE</code> 不支持</p><p>例:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// -2相当于3号位，-1相当于4号位</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>].copyWithin(<span class="number">0</span>, <span class="number">-2</span>, <span class="number">-1</span>);</span><br><span class="line"><span class="comment">// [4, 2, 3, 4, 5]</span></span><br><span class="line"><span class="keyword">let</span> a = [</span><br><span class="line">  <span class="string">"OB1"</span>,</span><br><span class="line">  <span class="string">"Koro1"</span>,</span><br><span class="line">  <span class="string">"OB2"</span>,</span><br><span class="line">  <span class="string">"Koro2"</span>,</span><br><span class="line">  <span class="string">"OB3"</span>,</span><br><span class="line">  <span class="string">"Koro3"</span>,</span><br><span class="line">  <span class="string">"OB4"</span>,</span><br><span class="line">  <span class="string">"Koro4"</span>,</span><br><span class="line">  <span class="string">"OB5"</span>,</span><br><span class="line">  <span class="string">"Koro5"</span></span><br><span class="line">];</span><br><span class="line"><span class="comment">// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换</span></span><br><span class="line">a.copyWithin(<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>);</span><br><span class="line"><span class="comment">// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]</span></span><br></pre></td></tr></table></figure><p>从上述例子:</p><ol><li>第一个参数是开始被替换的元素位置</li><li>要替换数据的位置范围:从第二个参数是开始读取的元素，在第三个参数前面一个元素停止读取</li><li>数组的长度不会改变</li><li>读了几个元素就从开始被替换的地方替换几个元素</li></ol><h4 id="ES6-fill-填充数组"><a href="#ES6-fill-填充数组" class="headerlink" title="ES6: fill() 填充数组"></a>ES6: fill() 填充数组</h4><p>定义: 使用给定值，填充一个数组。<br>参数:</p><ul><li>第一个元素(必须): 要填充数组的值</li><li>第二个元素(可选): 填充的开始位置,默认值为 0</li><li>第三个元素(可选): 填充的结束位置，默认是为 this.length</li></ul><p>MDN 浏览器兼容</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array1 = [<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>];</span><br><span class="line"></span><br><span class="line">array1.fill(<span class="number">7</span>); <span class="comment">// [7, 7, 7]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> array2 = [<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>];</span><br><span class="line">array2.fill(<span class="number">7</span>, <span class="number">1</span>, <span class="number">2</span>); <span class="comment">// ['a', 7, 'c']</span></span><br></pre></td></tr></table></figure><h3 id="不改变原数组的方法-8-个"><a href="#不改变原数组的方法-8-个" class="headerlink" title="不改变原数组的方法(8 个)"></a>不改变原数组的方法(8 个)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ES5:</span></span><br><span class="line">join()、toLocateString()、toStrigin()、slice()、cancat()、indexOf()、lastIndexOf()、</span><br><span class="line"><span class="comment">// ES7:</span></span><br><span class="line">includes()</span><br></pre></td></tr></table></figure><h4 id="join-数组转字符串"><a href="#join-数组转字符串" class="headerlink" title="join() 数组转字符串"></a>join() 数组转字符串</h4><p>定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。<br>语法: <code>array.join(str)</code><br>参数:</p><ul><li>str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="string">"hello"</span>, <span class="string">"world"</span>];</span><br><span class="line"><span class="keyword">let</span> str = a.join(); <span class="comment">// 'hello,world'</span></span><br><span class="line"><span class="keyword">let</span> str2 = a.join(<span class="string">"+"</span>); <span class="comment">// 'hello+world'</span></span><br></pre></td></tr></table></figure><p>使用 join 方法或者下文说到的 toString 方法时，当数组中的元素也是数组或者是对象时会出现什么情况？</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [[<span class="string">"OBKoro1"</span>, <span class="string">"23"</span>], <span class="string">"test"</span>];</span><br><span class="line"><span class="keyword">let</span> str1 = a.join(); <span class="comment">// OBKoro1,23,test</span></span><br><span class="line"><span class="keyword">let</span> b = [&#123; <span class="attr">name</span>: <span class="string">"OBKoro1"</span>, <span class="attr">age</span>: <span class="string">"23"</span> &#125;, <span class="string">"test"</span>];</span><br><span class="line"><span class="keyword">let</span> str2 = b.join(); <span class="comment">// [object Object],test</span></span><br><span class="line"><span class="comment">// 对象转字符串推荐JSON.stringify(obj);</span></span><br></pre></td></tr></table></figure><p>所以，<code>join()</code>/<code>toString()</code>方法在数组元素是数组的时候，会将里面的数组也调用<code>join()</code>/<code>toString()</code>,如果是对象的话，对象会被转为<code>[object Object]</code>字符串。</p><h4 id="toLocaleString-数组转字符串"><a href="#toLocaleString-数组转字符串" class="headerlink" title="toLocaleString() 数组转字符串"></a>toLocaleString() 数组转字符串</h4><p>定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。<br>语法: <code>array.toLocaleString()</code><br>参数: 无。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [&#123; <span class="attr">name</span>: <span class="string">"OBKoro1"</span> &#125;, <span class="number">23</span>, <span class="string">"abcd"</span>, <span class="keyword">new</span> <span class="built_in">Date</span>()];</span><br><span class="line"><span class="keyword">let</span> str = a.toLocaleString(); <span class="comment">// [object Object],23,abcd,2018/5/28 下午1:52:20</span></span><br></pre></td></tr></table></figure><p>如上述例子: 调用数组的<code>toLocaleString</code>方法，数组中的每个元素都会调用自身的<code>toLocaleString</code>方法，对象调用对象的<code>toLocaleString</code>,Date 调用 Date 的<code>toLocaleString</code>。</p><h4 id="toString-数组转字符串-不推荐"><a href="#toString-数组转字符串-不推荐" class="headerlink" title="toString() 数组转字符串 (不推荐)"></a>toString() 数组转字符串 (不推荐)</h4><p>定义: toString() 方法可把数组转换为由逗号链接起来的字符串。<br>语法: <code>array.toString()</code><br>参数: 无。</p><p>该方法的效果和 join 方法一样，都是用于数组转字符串的，但是与 join 方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。</p><p><strong>值得注意的是:</strong> 当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> b = [<span class="string">"toString"</span>, <span class="string">"演示"</span>].toString(); <span class="comment">// toString,演示</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="string">"调用toString"</span>, <span class="string">"连接在我后面"</span>] + <span class="string">"啦啦啦"</span>; <span class="comment">// 调用toString,连接在我后面啦啦啦</span></span><br></pre></td></tr></table></figure><h4 id="slice-浅拷贝数组的元素"><a href="#slice-浅拷贝数组的元素" class="headerlink" title="slice() 浅拷贝数组的元素"></a>slice() 浅拷贝数组的元素</h4><p>定义: 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。<br>注意: 字符串也有一个 slice() 方法是用来提取字符串的，不要弄混了。<br>语法: <code>array.slice(begin, end)</code><br>参数:</p><ul><li>begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为 0。</li><li>end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="string">"hello"</span>, <span class="string">"world"</span>];</span><br><span class="line"><span class="keyword">let</span> b = a.slice(<span class="number">0</span>, <span class="number">1</span>); <span class="comment">// ['hello']</span></span><br><span class="line">a[<span class="number">0</span>] = <span class="string">"改变原数组"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a, b); <span class="comment">// ['改变原数组','world'] ['hello']</span></span><br><span class="line">b[<span class="number">0</span>] = <span class="string">"改变拷贝的数组"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a, b); <span class="comment">// ['改变原数组','world'] ['改变拷贝的数组']</span></span><br></pre></td></tr></table></figure><p><strong>如上:</strong> 新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。<br>如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [&#123; <span class="attr">name</span>: <span class="string">"OBKoro1"</span> &#125;];</span><br><span class="line"><span class="keyword">let</span> b = a.slice();</span><br><span class="line"><span class="built_in">console</span>.log(b, a); <span class="comment">// [&#123;"name":"OBKoro1"&#125;]  [&#123;"name":"OBKoro1"&#125;]</span></span><br><span class="line"><span class="comment">// a[0].name='改变原数组';</span></span><br><span class="line"><span class="comment">// console.log(b,a); // [&#123;"name":"改变原数组"&#125;] [&#123;"name":"改变原数组"&#125;]</span></span><br><span class="line"><span class="comment">// b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';</span></span><br><span class="line"><span class="comment">//  [&#123;"name":"改变拷贝数组","koro":"改变拷贝数组"&#125;] [&#123;"name":"改变拷贝数组","koro":"改变拷贝数组"&#125;]</span></span><br></pre></td></tr></table></figure><p>原因在定义上面说过了的:slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。</p><h4 id="cancat-数组合并"><a href="#cancat-数组合并" class="headerlink" title="cancat() 数组合并"></a>cancat() 数组合并</h4><p>定义: 方法用于合并两个或多个数组，返回一个新数组。<br>语法: <code>let newArr = oldArray.concat(arrayX,arrayX,......,arrayX)</code><br>参数:</p><ul><li>arrayX（必须）: 该参数可以是具体的值，也可以是数组对象。可以是任意多个。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="comment">//连接两个数组</span></span><br><span class="line"><span class="keyword">let</span> newVal = a.concat(b); <span class="comment">// [1,2,3,4,5,6]</span></span><br><span class="line"><span class="comment">// 连接三个数组</span></span><br><span class="line"><span class="keyword">let</span> c = [<span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>];</span><br><span class="line"><span class="keyword">let</span> newVal2 = a.concat(b, c); <span class="comment">// [1,2,3,4,5,6,7,8,9]</span></span><br><span class="line"><span class="comment">// 添加元素</span></span><br><span class="line"><span class="keyword">let</span> newVal3 = a.concat(<span class="string">"添加元素"</span>, b, c, <span class="string">"再加一个"</span>);</span><br><span class="line"><span class="comment">// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]</span></span><br><span class="line"><span class="comment">// 合并嵌套数组  会浅拷贝嵌套数组</span></span><br><span class="line"><span class="keyword">let</span> d = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="keyword">let</span> f = [<span class="number">3</span>, [<span class="number">4</span>]];</span><br><span class="line"><span class="keyword">let</span> newVal4 = d.concat(f); <span class="comment">// [1,2,3,[4]]</span></span><br></pre></td></tr></table></figure><h4 id="ES6-扩展运算符-合并数组"><a href="#ES6-扩展运算符-合并数组" class="headerlink" title="ES6 扩展运算符...合并数组"></a>ES6 扩展运算符<code>...</code>合并数组</h4><p>因为 ES6 的语法更简洁易懂，所以现在合并数组我大部分采用<code>...</code>来处理，<code>...</code>运算符可以实现<code>cancat</code>的每个例子，且更简洁和具有高度自定义数组元素位置的效果。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">4</span>, ...a, <span class="number">4</span>, <span class="number">4</span>];</span><br><span class="line"><span class="built_in">console</span>.log(a, b); <span class="comment">//  [2, 3, 4, 5] [4,2,3,4,5,4,4]</span></span><br></pre></td></tr></table></figure><p>更多关于扩展符的详细内容移步阮一峰大神的<a href="http://es6.ruanyifeng.com/#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6" target="_blank" rel="noopener">ECMAScript 6 入门</a></p><h4 id="indexOf-查找数组是否存在某个元素，返回下标"><a href="#indexOf-查找数组是否存在某个元素，返回下标" class="headerlink" title="indexOf() 查找数组是否存在某个元素，返回下标"></a>indexOf() 查找数组是否存在某个元素，返回下标</h4><p>定义: 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。<br>语法: <code>array.indexOf(searchElement,fromIndex)</code><br>参数:</p><ul><li>searchElement(必须): 被查找的元素</li><li>fromIndex(可选): 开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为 0。</li></ul><blockquote><p>严格相等的搜索: 数组的 indexOf 搜索跟字符串的 indexOf 不一样,数组的 indexOf 使用严格相等<code>===</code>搜索元素，即<strong>数组元素要完全匹配</strong>才能搜索成功。</p></blockquote><p><strong>注意:</strong>indexOf()不能识别 <code>NaN</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="string">"啦啦"</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">24</span>, <span class="literal">NaN</span>];</span><br><span class="line"><span class="built_in">console</span>.log(a.indexOf(<span class="string">"啦"</span>)); <span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(a.indexOf(<span class="string">"NaN"</span>)); <span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(a.indexOf(<span class="string">"啦啦"</span>)); <span class="comment">// 0</span></span><br></pre></td></tr></table></figure><p>使用场景:</p><ol><li>数组去重</li><li>根据获取的数组下标执行操作，改变数组中的值等。</li><li>判断是否存在，执行操作。</li></ol><h4 id="lastIndexOf-查找指定元素在数组中的最后一个位置"><a href="#lastIndexOf-查找指定元素在数组中的最后一个位置" class="headerlink" title="lastIndexOf() 查找指定元素在数组中的最后一个位置"></a>lastIndexOf() 查找指定元素在数组中的最后一个位置</h4><p>定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）<br>语法: <code>arr.lastIndexOf(searchElement,fromIndex)</code><br>参数:</p><ul><li>searchElement(必须): 被查找的元素</li><li>fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。</li><li>关于 fromIndex 有三个规则:<ul><li>正值。如果该值大于或等于数组的长度，则整个数组会被查找。</li><li>负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)</li><li>负值。其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。</li></ul></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组长度为10</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="string">"OB"</span>, <span class="number">4</span>, <span class="string">"Koro1"</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="string">"Koro1"</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="string">"Koro1"</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从下标4开始往前找 返回下标2</span></span><br><span class="line"><span class="built_in">console</span>.log(a.lastIndexOf(<span class="string">"Koro1"</span>, <span class="number">4</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">//  大于或数组的长度 查找整个数组 返回9</span></span><br><span class="line"><span class="built_in">console</span>.log(a.lastIndexOf(<span class="string">"Koro1"</span>, <span class="number">100</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// -1 数组不会被查找</span></span><br><span class="line"><span class="built_in">console</span>.log(a.lastIndexOf(<span class="string">"Koro1"</span>, <span class="number">-11</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从第二个元素4往前查找，没有找到 返回-1</span></span><br><span class="line"><span class="built_in">console</span>.log(a.lastIndexOf(<span class="string">"Koro1"</span>, <span class="number">-9</span>));</span><br></pre></td></tr></table></figure><h4 id="ES7-includes-查找数组是否包含某个元素-返回布尔"><a href="#ES7-includes-查找数组是否包含某个元素-返回布尔" class="headerlink" title="ES7: includes() 查找数组是否包含某个元素 返回布尔"></a>ES7: includes() 查找数组是否包含某个元素 返回布尔</h4><p>定义: 返回一个布尔值，表示某个数组是否包含给定的值</p><p>语法: <code>array.includes(searchElement,fromIndex=0)</code><br>参数:</p><ul><li>searchElement(必须):被查找的元素</li><li>fromIndex(可选):默认值为 0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回 false。负值绝对值超过长数组度，重置从 0 开始搜索。</li></ul><p><strong>includes 方法是为了弥补 indexOf 方法的缺陷而出现的</strong>:</p><ol><li>indexOf 方法不能识别 <code>NaN</code></li><li>indexOf 方法检查是否包含某个值不够语义化，需要判断是否不等于<code>-1</code>，表达不够直观</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="string">"OB"</span>, <span class="string">"Koro1"</span>, <span class="number">1</span>, <span class="literal">NaN</span>];</span><br><span class="line"><span class="built_in">console</span>.log(a.includes(<span class="literal">NaN</span>)); <span class="comment">// true 识别NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(a.includes(<span class="string">"Koro1"</span>, <span class="number">100</span>)); <span class="comment">// false 超过数组长度 不搜索</span></span><br><span class="line"><span class="built_in">console</span>.log(a.includes(<span class="string">"Koro1"</span>, <span class="number">-3</span>)); <span class="comment">// true 从倒数第三个元素开始搜索</span></span><br><span class="line"><span class="built_in">console</span>.log(a.includes(<span class="string">"Koro1"</span>, <span class="number">-100</span>)); <span class="comment">// true 负值绝对值超过数组长度，搜索整个数组</span></span><br></pre></td></tr></table></figure><p>兼容性(MDN): <code>chrome47</code>, <code>Firefox 43</code>,<code>Edge 14</code>,<code>Opera 34</code>, <code>Safari 9</code>,<code>IE</code> 未实现。</p><h3 id="遍历方法-12-个"><a href="#遍历方法-12-个" class="headerlink" title="遍历方法(12 个)"></a>遍历方法(12 个)</h3><p>js 中遍历数组并不会改变原始数组的方法总共有 12 个:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ES5:</span></span><br><span class="line">forEach()、every() 、some()、 fliter()、map()、reduce()、reduceRight()</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6:</span></span><br><span class="line">find()、findIndex()、keys()、values()、entries()</span><br></pre></td></tr></table></figure><p><strong>关于遍历:</strong></p><ul><li>关于遍历的效率，可以看一下这篇详解 JS 遍历</li><li>尽量不要在遍历的时候，修改后面要遍历的值</li><li>尽量不要在遍历的时候修改数组的长度（删除/添加）</li></ul><h4 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h4><p>定义: 按升序为数组中含有效值的每一项执行一次回调函数。<br>语法: <code>array.forEach(function(currentValue, index, arr), thisValue)</code><br>参数:</p><ul><li>function(必须): 数组中每个元素需要调用的函数<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisValue (可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><p><strong>关于 forEach()你要知道:</strong></p><ul><li>无法中途退出循环，只能用 <code>return</code> 退出本次回调，进行下一次回调。</li><li>它总是返回 <code>undefined</code> 值,即使你 <code>return</code> 了一个值。</li></ul><p><strong>下面类似语法同样适用这些规则:</strong></p><ol><li>对于空数组是不会执行回调函数的</li><li>对于已在迭代过程中删除的元素，或者空元素会跳过回调函数</li><li>遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。</li><li>如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">2</span>, , <span class="number">3</span>]; <span class="comment">// 最后第二个元素是空的，不会遍历(undefined、null会遍历)</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="attr">name</span>: <span class="string">"OBKoro1"</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> result = a.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, index, array</span>) </span>&#123;</span><br><span class="line">  a[<span class="number">3</span>] = <span class="string">"改变元素"</span>;</span><br><span class="line">  a.push(<span class="string">"添加到尾端，不会被遍历"</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(value, <span class="string">"forEach传递的第一个参数"</span>); <span class="comment">// 分别打印 1 ,2 ,改变元素</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.name); <span class="comment">// OBKoro1 打印三次 this绑定在obj对象上</span></span><br><span class="line">  <span class="comment">// break; // break会报错</span></span><br><span class="line">  <span class="keyword">return</span> value; <span class="comment">// return只能结束本次回调 会执行下次回调</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"不会执行，因为return 会执行下一次循环回调"</span>);</span><br><span class="line">&#125;, obj);</span><br><span class="line"><span class="built_in">console</span>.log(result); <span class="comment">// 即使return了一个值,也还是返回undefined</span></span><br><span class="line"><span class="comment">// 回调函数也接受接头函数写法</span></span><br></pre></td></tr></table></figure><h4 id="every-检测数组所有元素是否都符合判断条件"><a href="#every-检测数组所有元素是否都符合判断条件" class="headerlink" title="every 检测数组所有元素是否都符合判断条件"></a>every 检测数组所有元素是否都符合判断条件</h4><p>定义: 方法用于检测数组所有元素是否都符合函数定义的条件<br>语法: <code>array.every(function(currentValue, index, arr), thisValue)</code><br>参数: (这几个方法的参数，语法都类似)</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisValue(可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><p>方法返回值规则:</p><ol><li>如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。</li><li>如果所有元素都满足条件，则返回 true。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isBigEnough</span>(<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> element &gt;= <span class="number">10</span>; <span class="comment">// 判断数组中的所有元素是否都大于10</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> result = [<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>].every(isBigEnough); <span class="comment">// false</span></span><br><span class="line"><span class="keyword">let</span> result = [<span class="number">12</span>, <span class="number">54</span>, <span class="number">18</span>, <span class="number">130</span>, <span class="number">44</span>].every(isBigEnough); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 接受箭头函数写法</span></span><br><span class="line">[<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>].every(<span class="function"><span class="params">x</span> =&gt;</span> x &gt;= <span class="number">10</span>); <span class="comment">// false</span></span><br><span class="line">[<span class="number">12</span>, <span class="number">54</span>, <span class="number">18</span>, <span class="number">130</span>, <span class="number">44</span>].every(<span class="function"><span class="params">x</span> =&gt;</span> x &gt;= <span class="number">10</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h4 id="some-数组中的是否有满足判断条件的元素"><a href="#some-数组中的是否有满足判断条件的元素" class="headerlink" title="some 数组中的是否有满足判断条件的元素"></a>some 数组中的是否有满足判断条件的元素</h4><p>定义: 数组中的是否有满足判断条件的元素<br>语法: <code>array.some(function(currentValue, index, arr), thisValue)</code><br>参数: (这几个方法的参数，语法都类似)</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisValue(可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><p>方法返回值规则:</p><ol><li>如果有一个元素满足条件，则表达式返回 true, 剩余的元素不会再执行检测。</li><li>如果没有满足条件的元素，则返回 false。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isBigEnough</span>(<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> element &gt;= <span class="number">10</span>; <span class="comment">//数组中是否有一个元素大于 10</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> result = [<span class="number">2</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">1</span>, <span class="number">4</span>].some(isBigEnough); <span class="comment">// false</span></span><br><span class="line"><span class="keyword">let</span> result = [<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">1</span>, <span class="number">4</span>].some(isBigEnough); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h4 id="filter-过滤原始数组，返回新数组"><a href="#filter-过滤原始数组，返回新数组" class="headerlink" title="filter 过滤原始数组，返回新数组"></a>filter 过滤原始数组，返回新数组</h4><p>定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。<br>语法: <code>let new_array = arr.filter(function(currentValue, index, arr), thisArg)</code><br>参数: (这几个方法的参数，语法都类似)</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisArg(可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">32</span>, <span class="number">33</span>, <span class="number">16</span>, <span class="number">40</span>];</span><br><span class="line"><span class="keyword">let</span> result = a.filter(<span class="function"><span class="keyword">function</span>(<span class="params">value, index, array</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt;= <span class="number">18</span>; <span class="comment">// 返回a数组中所有大于18的元素</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(result, a); <span class="comment">// [32,33,40] [32,33,16,40]</span></span><br></pre></td></tr></table></figure><h4 id="map-对数组中的每个元素进行处理，返回新的数组"><a href="#map-对数组中的每个元素进行处理，返回新的数组" class="headerlink" title="map 对数组中的每个元素进行处理，返回新的数组"></a>map 对数组中的每个元素进行处理，返回新的数组</h4><p>定义: 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。<br>语法: <code>let new_array = arr.map(function(currentValue, index, arr), thisArg)</code><br>参数: (这几个方法的参数，语法都类似)</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisArg(可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="string">'1'</span>,<span class="string">'2'</span>,<span class="string">'3'</span>,<span class="string">'4'</span>];</span><br><span class="line"><span class="keyword">let</span> result = a.map(<span class="function"><span class="keyword">function</span> (<span class="params">value, index, array</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value + <span class="string">'新数组的新元素'</span></span><br><span class="line"><span class="built_in">console</span>.log(result, a);</span><br><span class="line"><span class="comment">// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]</span></span><br></pre></td></tr></table></figure><h4 id="reduce-为数组提供累加器，合并为一个值"><a href="#reduce-为数组提供累加器，合并为一个值" class="headerlink" title="reduce 为数组提供累加器，合并为一个值"></a>reduce 为数组提供累加器，合并为一个值</h4><p>定义: reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。<br>语法: <code>array.reduce(function(total, currentValue, currentIndex, arr), initialValue)</code><br>参数:</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>total(必须)，初始值, 或者上一次调用回调返回的值</li><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>initialValue(可选): 指定第一次回调 的第一个参数。<br>回调第一次执行时:<ul><li>如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；</li><li>如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。</li><li>如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。</li></ul></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组求和</span></span><br><span class="line"><span class="keyword">let</span> sum = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"><span class="comment">// 6</span></span><br><span class="line"><span class="comment">// 将二维数组转化为一维 将数组元素展开</span></span><br><span class="line"><span class="keyword">let</span> flattened = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].reduce(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a.concat(b), []);</span><br><span class="line"><span class="comment">// [0, 1, 2, 3, 4, 5]</span></span><br></pre></td></tr></table></figure><h4 id="reduceRight-从右至左累加"><a href="#reduceRight-从右至左累加" class="headerlink" title="reduceRight 从右至左累加"></a>reduceRight 从右至左累加</h4><p>这个方法除了与 reduce 执行方向相反外，其他完全与其一致，请参考上述 reduce 方法介绍。</p><h4 id="ES6-find-amp-findIndex-根据条件找到数组成员"><a href="#ES6-find-amp-findIndex-根据条件找到数组成员" class="headerlink" title="ES6: find() &amp; findIndex() 根据条件找到数组成员"></a>ES6: find() &amp; findIndex() 根据条件找到数组成员</h4><p>find()定义: 用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回 undefined。<br>findIndex()定义: 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。<br>这两个方法<br>语法:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// find</span></span><br><span class="line"><span class="keyword">let</span> new_array = arr.find(<span class="function"><span class="keyword">function</span>(<span class="params">currentValue, index, arr</span>), <span class="title">thisArg</span>);</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// findIndex</span></span><br><span class="line"><span class="keyword">let</span> new_array_index = arr.findIndex(<span class="function"><span class="keyword">function</span>(<span class="params">currentValue, index, arr</span>), <span class="title">thisArg</span>);</span></span><br></pre></td></tr></table></figure><p>参数:(这几个方法的参数，语法都类似)</p><ul><li>function(必须): 数组中每个元素需要调用的函数。<ul><li>currentValue(必须),数组当前元素的值</li><li>index(可选), 当前元素的索引值</li><li>arr(可选),数组对象本身</li></ul></li><li>thisArg(可选): 当执行回调函数时 this 绑定对象的值，默认值为<code>undefined</code></li></ul><p>这两个方法都可以识别<code>NaN</code>,弥补了<code>indexOf</code>的不足.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// find</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>].find(<span class="function"><span class="params">n</span> =&gt;</span> n &lt; <span class="number">0</span>); <span class="comment">// 返回元素-5</span></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>, <span class="literal">NaN</span>].find(<span class="function"><span class="params">n</span> =&gt;</span> <span class="built_in">Object</span>.is(<span class="literal">NaN</span>, n)); <span class="comment">// 返回元素NaN</span></span><br><span class="line"><span class="comment">// findIndex</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>].findIndex(<span class="function"><span class="params">n</span> =&gt;</span> n &lt; <span class="number">0</span>); <span class="comment">// 返回索引2</span></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>, <span class="literal">NaN</span>].findIndex(<span class="function"><span class="params">n</span> =&gt;</span> <span class="built_in">Object</span>.is(<span class="literal">NaN</span>, n)); <span class="comment">// 返回索引4</span></span><br></pre></td></tr></table></figure><p>浏览器兼容(MDN):<code>Chrome 45</code>,<code>Firefox 25</code>,<code>Opera 32</code>, <code>Safari 8</code>, <code>Edge</code> yes,</p><h4 id="ES6-keys-amp-values-amp-entries-遍历键名、遍历键值、遍历键名-键值"><a href="#ES6-keys-amp-values-amp-entries-遍历键名、遍历键值、遍历键名-键值" class="headerlink" title="ES6 keys() &amp; values() &amp; entries() 遍历键名、遍历键值、遍历键名+键值"></a>ES6 keys() &amp; values() &amp; entries() 遍历键名、遍历键值、遍历键名+键值</h4><p>定义: 三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。</p><p>语法:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">array.keys();</span><br><span class="line">array.values();</span><br><span class="line">array.entries();</span><br></pre></td></tr></table></figure><p>参数: 无。</p><p>遍历例子(摘自<a href="http://es6.ruanyifeng.com/#docs/array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E7%9A%84-entries%EF%BC%8Ckeys-%E5%92%8C-values" target="_blank" rel="noopener">ECMAScript 6 入门</a>):</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> index <span class="keyword">of</span> [<span class="string">"a"</span>, <span class="string">"b"</span>].keys()) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(index);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> elem <span class="keyword">of</span> [<span class="string">"a"</span>, <span class="string">"b"</span>].values()) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(elem);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 'a'</span></span><br><span class="line"><span class="comment">// 'b'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [index, elem] <span class="keyword">of</span> [<span class="string">"a"</span>, <span class="string">"b"</span>].entries()) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(index, elem);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 0 "a"</span></span><br><span class="line"><span class="comment">// 1 "b"</span></span><br></pre></td></tr></table></figure><p>在<code>for..of</code>中如果遍历中途要退出，可以使用<code>break</code>退出循环。<br>如果不使用<code>for...of</code>循环，可以手动调用遍历器对象的<code>next</code>方法，进行遍历。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> letter = [<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>];</span><br><span class="line"><span class="keyword">let</span> entries = letter.entries();</span><br><span class="line"><span class="built_in">console</span>.log(entries.next().value); <span class="comment">// [0, 'a']</span></span><br><span class="line"><span class="built_in">console</span>.log(entries.next().value); <span class="comment">// [1, 'b']</span></span><br><span class="line"><span class="built_in">console</span>.log(entries.next().value); <span class="comment">// [2, 'c']</span></span><br></pre></td></tr></table></figure><blockquote><p>entries()浏览器兼容性(MDN):<code>Chrome 38</code>,<code>Firefox 28</code>,<code>Opera 25</code>,<code>Safari 7.1</code><br>keys()浏览器兼容性(MDN):<code>Chrome 38</code>, <code>Firefox 28</code>,<code>Opera 25</code>,<code>Safari 8</code></p></blockquote></div><div class="reward-container"><div></div> <button onclick='var qr=document.getElementById("qr");qr.style.display="none"===qr.style.display?"block":"none"'> 打赏</button><div id="qr" style="display:none"><div style="display:inline-block"> <img src="/uploads/wechatpay.jpeg" alt="csjiabin 微信支付"><p>微信支付</p></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i> js</a><a href="/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag"><i class="fa fa-tag"></i> 学习笔记</a></div><div class="post-widgets"><div class="wp_rating"><div id="wpac-rating"></div></div></div><div class="post-nav"><div class="post-nav-item"><a href="/2018/11/18/JS%E4%B8%AD%E7%9A%84%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86/" rel="prev" title="JS中的内存管理"><i class="fa fa-chevron-left"></i> JS中的内存管理</a></div><div class="post-nav-item"> <a href="/2019/02/15/Nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE%E4%B8%8E%E8%B4%9F%E8%BD%BD%E7%AD%96%E7%95%A5/" rel="next" title="Nginx负载均衡配置与负载策略">Nginx负载均衡配置与负载策略<i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><div class="comments"><div id="disqus_thread"><noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript></div></div><script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script></div><div class="toggle sidebar-toggle"><span class="toggle-line toggle-line-first"></span><span class="toggle-line toggle-line-middle"></span><span class="toggle-line toggle-line-last"></span></div><aside class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc"> 文章目录</li><li class="sidebar-nav-overview"> 站点概览</li></ul><div class="post-toc-wrap sidebar-panel"><div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#创建一个数组"><span class="nav-number">1.</span> <span class="nav-text">创建一个数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#ES6-Array-of-返回由所有参数值组成的数组"><span class="nav-number">1.1.</span> <span class="nav-text">ES6 Array.of() 返回由所有参数值组成的数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ES6-Arrar-from-将两类对象转为真正的数组"><span class="nav-number">1.2.</span> <span class="nav-text">ES6 Arrar.from() 将两类对象转为真正的数组</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#方法"><span class="nav-number">2.</span> <span class="nav-text">方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#改变原数组的方法-9-个"><span class="nav-number">2.1.</span> <span class="nav-text">改变原数组的方法(9 个)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#pop-删除一个数组中的最后的一个元素"><span class="nav-number">2.1.1.</span> <span class="nav-text">pop() 删除一个数组中的最后的一个元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#shift-删除数组的第一个元素"><span class="nav-number">2.1.2.</span> <span class="nav-text">shift() 删除数组的第一个元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#push-向数组的末尾添加元素"><span class="nav-number">2.1.3.</span> <span class="nav-text">push() 向数组的末尾添加元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#unshift-向数组的开头添加元素"><span class="nav-number">2.1.4.</span> <span class="nav-text">unshift() 向数组的开头添加元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reverse-颠倒数组中元素的顺序"><span class="nav-number">2.1.5.</span> <span class="nav-text">reverse() 颠倒数组中元素的顺序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#splice-添加-删除数组元素"><span class="nav-number">2.1.6.</span> <span class="nav-text">splice() 添加&#x2F;删除数组元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#sort-数组排序"><span class="nav-number">2.1.7.</span> <span class="nav-text">sort() 数组排序</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#比较函数的两个参数"><span class="nav-number">2.1.7.1.</span> <span class="nav-text">比较函数的两个参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#sort-排序常见用法"><span class="nav-number">2.1.7.2.</span> <span class="nav-text">sort 排序常见用法</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-copyWithin-指定位置的成员复制到其他位置"><span class="nav-number">2.1.8.</span> <span class="nav-text">ES6: copyWithin() 指定位置的成员复制到其他位置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-fill-填充数组"><span class="nav-number">2.1.9.</span> <span class="nav-text">ES6: fill() 填充数组</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#不改变原数组的方法-8-个"><span class="nav-number">2.2.</span> <span class="nav-text">不改变原数组的方法(8 个)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#join-数组转字符串"><span class="nav-number">2.2.1.</span> <span class="nav-text">join() 数组转字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#toLocaleString-数组转字符串"><span class="nav-number">2.2.2.</span> <span class="nav-text">toLocaleString() 数组转字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#toString-数组转字符串-不推荐"><span class="nav-number">2.2.3.</span> <span class="nav-text">toString() 数组转字符串 (不推荐)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#slice-浅拷贝数组的元素"><span class="nav-number">2.2.4.</span> <span class="nav-text">slice() 浅拷贝数组的元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#cancat-数组合并"><span class="nav-number">2.2.5.</span> <span class="nav-text">cancat() 数组合并</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-扩展运算符-合并数组"><span class="nav-number">2.2.6.</span> <span class="nav-text">ES6 扩展运算符...合并数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#indexOf-查找数组是否存在某个元素，返回下标"><span class="nav-number">2.2.7.</span> <span class="nav-text">indexOf() 查找数组是否存在某个元素，返回下标</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#lastIndexOf-查找指定元素在数组中的最后一个位置"><span class="nav-number">2.2.8.</span> <span class="nav-text">lastIndexOf() 查找指定元素在数组中的最后一个位置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES7-includes-查找数组是否包含某个元素-返回布尔"><span class="nav-number">2.2.9.</span> <span class="nav-text">ES7: includes() 查找数组是否包含某个元素 返回布尔</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#遍历方法-12-个"><span class="nav-number">2.3.</span> <span class="nav-text">遍历方法(12 个)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach"><span class="nav-number">2.3.1.</span> <span class="nav-text">forEach</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#every-检测数组所有元素是否都符合判断条件"><span class="nav-number">2.3.2.</span> <span class="nav-text">every 检测数组所有元素是否都符合判断条件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#some-数组中的是否有满足判断条件的元素"><span class="nav-number">2.3.3.</span> <span class="nav-text">some 数组中的是否有满足判断条件的元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#filter-过滤原始数组，返回新数组"><span class="nav-number">2.3.4.</span> <span class="nav-text">filter 过滤原始数组，返回新数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#map-对数组中的每个元素进行处理，返回新的数组"><span class="nav-number">2.3.5.</span> <span class="nav-text">map 对数组中的每个元素进行处理，返回新的数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reduce-为数组提供累加器，合并为一个值"><span class="nav-number">2.3.6.</span> <span class="nav-text">reduce 为数组提供累加器，合并为一个值</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reduceRight-从右至左累加"><span class="nav-number">2.3.7.</span> <span class="nav-text">reduceRight 从右至左累加</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-find-amp-findIndex-根据条件找到数组成员"><span class="nav-number">2.3.8.</span> <span class="nav-text">ES6: find() &amp; findIndex() 根据条件找到数组成员</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-keys-amp-values-amp-entries-遍历键名、遍历键值、遍历键名-键值"><span class="nav-number">2.3.9.</span> <span class="nav-text">ES6 keys() &amp; values() &amp; entries() 遍历键名、遍历键值、遍历键名+键值</span></a></li></ol></li></ol></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" alt="csjiabin" src="https://avatars0.githubusercontent.com/u/20592953"><p class="site-author-name" itemprop="name">csjiabin</p><div class="site-description" itemprop="description">I never consider ease and joyfulness as the purpose of life itself.</div></div><div class="site-state-wrap motion-element"><nav class="site-state"><div class="site-state-item site-state-posts"> <a href="/archives/"><span class="site-state-item-count">17</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"> <a href="/categories/"><span class="site-state-item-count">7</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"> <a href="/tags/"><span class="site-state-item-count">31</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/csjiabin" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;csjiabin" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i> GitHub</a></span><span class="links-of-author-item"><a href="mailto:qq1187712426@gmail.com" title="E-Mail → mailto:qq1187712426@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i> E-Mail</a></span></div></div></div></aside><div id="sidebar-dimmer"></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright"> &copy; 2018 – <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">csjiabin</span></div><div class="busuanzi-count"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="post-meta-item" id="busuanzi_container_site_uv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-user"></i></span><span class="site-uv" title="总访客量"><span id="busuanzi_value_site_uv"></span></span></span> <span class="post-meta-divider">|</span><span class="post-meta-item" id="busuanzi_container_site_pv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-eye"></i></span><span class="site-pv" title="总访问量"><span id="busuanzi_value_site_pv"></span></span></span></div><div style="display:none"><script src="//s95.cnzz.com/z_stat.php?id=1187712426&web_id=1187712426"></script></div></div></footer></div><script src="/lib/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script><script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script><script src="//cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script><script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script><script src="/lib/velocity/velocity.min.js"></script><script src="/lib/velocity/velocity.ui.min.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/pisces.js"></script><script src="/js/next-boot.js"></script><script>CONFIG.page.isPost&&(wpac_init=window.wpac_init||[],wpac_init.push({widget:"Rating",id:13858,el:"wpac-rating",color:"fc6423"}),function(){if(!("WIDGETPACK_LOADED"in window)){WIDGETPACK_LOADED=!0;var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//embed.widgetpack.com/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t.nextSibling)}}())</script><script src="//cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script><script src="//cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script><script src="/js/algolia-search.js"></script><script>
document.querySelectorAll('.pdfobject-container').forEach(element => {
  let url = element.dataset.target;
  let pdfOpenParams = {
    navpanes : 0,
    toolbar  : 0,
    statusbar: 0,
    pagemode : 'thumbs',
    view     : 'FitH'
  };
  let pdfOpenFragment = '#' + Object.entries(pdfOpenParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
  let fullURL = `/lib/pdf/web/viewer.html?file=${encodeURIComponent(url)}${pdfOpenFragment}`;

  if (NexT.utils.supportsPDFs()) {
    element.innerHTML = `<embed class="pdfobject" src="${url + pdfOpenFragment}" type="application/pdf" style="height: ${element.dataset.height};">`;
  } else {
    element.innerHTML = `<iframe src="${fullURL}" style="height: ${element.dataset.height};" frameborder="0"></iframe>`;
  }
});
</script><script>function loadCount(){var d=document,n=d.createElement("script");n.src="https://csjiabin.disqus.com/count.js",n.id="dsq-count-scr",(d.head||d.body).appendChild(n)}window.addEventListener("load",loadCount,!1)</script><script>
  var disqus_config = function() {
    this.page.url = "https://csjiabin.github.io/2019/01/15/js%E6%95%B0%E7%BB%84%E8%AF%A6%E7%BB%86%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%8F%8A%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86/";
    this.page.identifier = "2019/01/15/js数组详细操作方法及解析合集/";
    this.page.title = "js数组详细操作方法及解析合集";
    };
  NexT.utils.loadComments(document.querySelector('#disqus_thread'), () => {
    if (window.DISQUS) {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      });
    } else {
      var d = document, s = d.createElement('script');
      s.src = 'https://csjiabin.disqus.com/embed.js';
      s.setAttribute('data-timestamp', '' + +new Date());
      (d.head || d.body).appendChild(s);
    }
  });
</script><script type="text/javascript" src="/js/love.js"></script></body></html>